// 产生随机数的函数，用于模拟数据
let randomNum=function(min,max){
	const range=max-min;
	const rand=Math.random();
	return (min+Math.round(rand*range));
};

let randomNums=function(min,max,count){
	let nums=[];
	for(let i=0; i<count; i++){
		nums[i]=randomNum(min,max);
	}
	return nums;
};
let arr=function(name) {
	let arr=[];
	let content = map.get(name);
	for(let item of content.entries()){
		arr.push(item[0]);
	}
	return arr;
};
let arr2=function(name) {
	let arr=[];
	let content = map.get(name);
	for(let item of content.entries()){
		arr.push(item[1]);
	}
	return arr;
};
let arr3=function(name) {
	let arr=[];
	let sum=0;
	sum=eval(arr2(name).join("+"));
	for(let item2 of arr2(name)) {
		arr.push(Math.round(item2/sum*100));
	}
	return arr;
};
let arr4=function(name) {
	let arr=[];
	let content = map.get(name);
	for(let item of content.entries()) {
		arr.push({name:item[0],value:item[1]});
	}
	console.info(arr);
	return arr;
};
let yearData=function(){
	let tempData=[];
	for(let i=0; i<4; i++){
		tempData[i]={
			year:2019+i,
			data:[randomNums(300,800,12),randomNums(300,800,12),],
		};
	}
	return tempData;
};
(function(){
	let myChart=echarts.init(document.querySelector('.left_chart_1 .chart'));
	let option={
		color:['#F57474','#56D0E3','#F8B448','#8B78F6'],
		tooltip:{
			trigger:'axis',
			axisPointer:{            // 坐标轴指示器，坐标轴触发有效
				type:'shadow'        // 默认为直线，可选为：'line' | 'shadow'
			}
		},
		toolbox:{
			magicType:{
				type:['bar','line','pie']
			},
			feature:{
				dataZoom:{
					show:true,
					yAxisIndex:'none',
					title:{
						zoom:'放大',
						back:'缩小'
					},
					iconStyle:{
						emphasis:{
							borderColor:'#338BFF'
						}
					}
				}
			}
		},
		legend:{
			textStyle:{
				color:'rgba(255,255,255,0.6)',
			},
			top:0,
			itemWidth:15,
			itemHeight:15,
		},
		grid:{
			left:'0%',
			right:'10%',
			bottom:'0%',
			top:"40px",
			containLabel:true
		},
		xAxis:[{
			type:'category',
			data:arr("area_house_count"),
			axisTick:{
				alignWithLabel:true
			},
			axisLabel:{
				color:'rgba(255,255,255,0.6)',
				fontSize:'10'
			},
			axisLine:{
				show:false
			}
		}],
		yAxis:[{
			type:'value',
			axisLabel:{
				color:'rgba(255,255,255,0.5)',
				fontSize:'10'
			},
			axisLine:{
				show:true,
				lineStyle:{
					color:'rgba(255,255,255,0.1)',
					width:2,
				}
			},
			splitLine:{
				lineStyle:{
					color:'rgba(255,255,255,0.1)',
					width:2,
				}
			},
			scale:true,
		}],
		series:[{
			name:'数量',
			type:'bar',
			barWidth:'30%',
			data:arr2("area_house_count"),
			itemStyle:{
				borderRadius:5
			},
			markPoint:{
				data:[{
					type:'max',
					name:'最大值',
				},{
					type:'min',
					name:'最小值',
				}]
			},
			markLine:{
				data:[{
					type:'average',
					name:'平均值',
				}],
				label:{
					color:'rgba(255,255,255,0.5)'
				}
			}
		},{
			name:'租金',
			type:'bar',
			barWidth:'30%',
			data:arr2("area_average_rental"),
			itemStyle:{
				borderRadius:5
			},
			markPoint:{
				data:[{
					type:'max',
					name:'最大值',
				},{
					type:'min',
					name:'最小值',
				}]
			},
			markLine:{
				data:[{
					type:'average',
					name:'平均值',
				}],
				label:{
					color:'rgba(255,255,255,0.5)'
				}
			}
		}]
	};
	myChart.setOption(option);
	window.addEventListener('resize',function(){
		myChart.resize();
	});
})();

// right_chart_1
(function(){
	let myColor=['#1089E7','#F57474','#56D0E3','#F8B448','#8B78F6'];
	let myChart=echarts.init(document.querySelector('.right_chart_1 .chart'));
	let option={
		grid:{
			left:'20%',
			bottom:'5%',
			top:"5%",
			right:'16%'
		},
		xAxis:{
			show:false,
		},
		yAxis:[{
			axisLine:{
				show:false
			},
			axisTick:{
				show:false
			},
			axisLabel:{
				color:'rgba(255,255,255,0.5)'
			},
			type:'category',
			data:arr("model_score"),
			inverse:true
		},{
			axisLine:{
				show:false
			},
			axisTick:{
				show:false
			},
			axisLabel:{
				color:'rgba(255,255,255,0.5)'
			},
			type:'category',
			data:arr2("model_score"),
			inverse:true
		},],
		series:[{
			name:'条',
			type:'bar',
			data:arr3("model_score"),
			barCategoryGap:50,
			barWidth:10,
			itemStyle:{
				borderRadius:20,
				color:function(params){
					return myColor[params.dataIndex%myColor.length];
				}
			},
			label:{
				show:true,
				position:'inside',
				formatter:'{c}%',
				color:'#FFFFFF'
			},
			yAxisIndex:0,
		},{
			name:'框',
			type:'bar',
			data:[100,100,100,100,100],
			barCategoryGap:50,
			barWidth:15,
			itemStyle:{
				color:'none',
				borderColor:'#00C1DE',
				borderWidth:2,
				borderRadius:15
			},
			yAxisIndex:1,
		}]
	};
	myChart.setOption(option);
	window.addEventListener('resize',function(){
		myChart.resize();
	});
})();

// left_chart_2
(function(){
	let myChart=echarts.init(document.querySelector('.left_chart_2 .chart'));
	let option={
		color:['#00F2F1','#ED3F35','#56D0E3','#F8B448','#8B78F6'],
		tooltip:{
			trigger:'axis'
		},
		legend:{
			textStyle:{
				color:'#4C9BFD',
			},
			right:'5%',
		},
		grid:{
			top:'20%',
			left:'3%',
			right:'4%',
			bottom:'3%',
			show:true,
			borderColor:'#012F4A',
			containLabel:true
		},
		xAxis:{
			type:'category',
			boundaryGap:false,
			data:arr("house_type_count"),
			axisTick:{
				show:false,
			},
			axisLabel:{
				color:'#4C9BFD',
			},
			axisLine:{
				show:false,
			},
		},
		yAxis:{
			type:'value',
			axisTick:{
				show:false,
			},
			axisLabel:{
				color:'#4C9BFD',
			},
			axisLine:{
				show:false,
			},
			splitLine:{
				lineStyle:{
					color:'#012F4A',
				}
			}
		},
		series:[{
			name:'新增出租',
			type:'line',
			areaStyle:{
				opacity:0.8,
				color:new echarts.graphic.LinearGradient(0,0,0,1,[{
					offset:0,
					color:'rgba(128, 255, 165)'
				},{
					offset:1,
					color:'rgba(1, 191, 236)'
				}])
			},
			data:arr2("house_type_count"),
			smooth:true,
		}]
	};
	myChart.setOption(option);
	window.addEventListener('resize',function(){
		myChart.resize();
	});

	$('.left_chart_2 .mySelect').on('change',function(){
		let optionIndex=$(this).prop('selectedIndex');
		option.series[0].data=yearData()[optionIndex].data[0];
		option.series[1].data=yearData()[optionIndex].data[1];
		myChart.setOption(option);
	});
})();

// right_chart_2
(function(){
	let myChart=echarts.init(document.querySelector('.right_chart_2 .chart'));
	let option={
		color:['#80FFA5','#00DDFF','#37A2FF','#FF0087','#FFBF00'],
		tooltip:{
			trigger:'axis',
			axisPointer:{
				type:'cross',
				label:{
					backgroundColor:'#6A7985'
				}
			},
			backgroundColor:'rgba(106,121,113,0.6)',
			textStyle:{
				color:'#FFFFFF',
			},
			transitionDuration:0.5
		},
		legend:{
			top:'0%',
			textStyle:{
				color:'rgba(255,255,255,0.5)',
				fontSize:12,
			}
		},
		grid:{
			left:'10px',
			right:'10px',
			bottom:'10px',
			top:'30px',
			containLabel:true
		},
		xAxis:[{
			type:'category',
			boundaryGap:false,
			data:Array.from(new Array(32).keys()).slice(-31),
			axisLabel:{
				color:'rgba(255,255,255,0.5)',
				fontSize:12,
			},
			axisLine:{
				lineStyle:{
					color:'rgba(255,255,255,0.5)'
				}
			},
			axisTick:{
				show:false
			}
		}],
		yAxis:[{
			type:'value',
			axisLabel:{
				color:'rgba(255,255,255,0.5)',
				fontSize:12,
			},
			axisLine:{
				lineStyle:{
					color:'rgba(255,255,255,0.5)'
				}
			},
			axisTick:{
				show:false
			},
			splitLine:{
				lineStyle:{
					color:'rgba(255,255,255,0.1)'
				}
			},
		}],
		series:[{
			name:'价钱',
			type:'line',
			stack:'总量',
			smooth:true,
			lineStyle:{
				width:1
			},
			showSymbol:false,
			areaStyle:{
				opacity:0.8,
				color:new echarts.graphic.LinearGradient(0,0,0,1,[{
					offset:0,
					color:'rgba(128, 255, 165)'
				},{
					offset:1,
					color:'rgba(1, 191, 236)'
				}])
			},
			emphasis:{
				focus:'series'
			},
			data:randomNums(100,500,31),
		},{
			name:'学区',
			type:'line',
			stack:'总量',
			smooth:true,
			lineStyle:{
				width:1
			},
			showSymbol:false,
			areaStyle:{
				opacity:0.8,
				color:new echarts.graphic.LinearGradient(0,0,0,1,[{
					offset:0,
					color:'rgba(0, 221, 255)'
				},{
					offset:1,
					color:'rgba(77, 119, 255)'
				}])
			},
			emphasis:{
				focus:'series'
			},
			data:randomNums(100,500,31),
		},{
			name:'地段',
			type:'line',
			stack:'总量',
			smooth:true,
			lineStyle:{
				width:1
			},
			showSymbol:false,
			areaStyle:{
				opacity:0.8,
				color:new echarts.graphic.LinearGradient(0,0,0,1,[{
					offset:0,
					color:'rgba(55, 162, 255)'
				},{
					offset:1,
					color:'rgba(116, 21, 219)'
				}])
			},
			emphasis:{
				focus:'series'
			},
			data:randomNums(100,500,31),
		},{
			name:'配套',
			type:'line',
			stack:'总量',
			smooth:true,
			lineStyle:{
				width:1
			},
			showSymbol:false,
			areaStyle:{
				opacity:0.8,
				color:new echarts.graphic.LinearGradient(0,0,0,1,[{
					offset:0,
					color:'rgba(255, 0, 135)'
				},{
					offset:1,
					color:'rgba(135, 0, 157)'
				}])
			},
			emphasis:{
				focus:'series'
			},
			data:randomNums(100,500,31),
		},{
			name:'地铁',
			type:'line',
			stack:'总量',
			smooth:true,
			lineStyle:{
				width:1
			},
			showSymbol:false,
			label:{
				show:true,
				position:'top'
			},
			areaStyle:{
				opacity:0.8,
				color:new echarts.graphic.LinearGradient(0,0,0,1,[{
					offset:0,
					color:'rgba(255, 191, 0)'
				},{
					offset:1,
					color:'rgba(224, 62, 76)'
				}])
			},
			emphasis:{
				focus:'series'
			},
			data:randomNums(100,500,31),
		}]
	};
	myChart.setOption(option);
	window.addEventListener('resize',function(){
		myChart.resize();
	});
})();

// left_chart_3
(function(){
	let myChart=echarts.init(document.querySelector('.left_chart_3 .chart'));
	let option={
		tooltip:{
			trigger:'item'
		},
		legend:{
			bottom:0,
			left:'auto',
			itemWidth:0,
			itemHeight:0,
			textStyle:{
				color:'rgba(255,255,255,0.5)',
				fontSize:10,
			}
		},
		series:[{
			name:'访问来源',
			type:'pie',
			center:['50%','45%'],
			radius:['50%','80%'],
			avoidLabelOverlap:false,
			itemStyle:{
				borderRadius:1,
				borderColor:'rgba(255,255,255,0.5)',
				borderWidth:1
			},
			label:{
				show:false,
				position:'center'
			},
			emphasis:{
				label:{
					show:true,
					fontSize:12,
				}
			},
			labelLine:{
				show:false
			},
			// data:[// {value:1048, name:'0～500'},{value:580, name:'500～1000'},{value:484, name:'1000～1500'},{value:300, name:'1500～2000'},{value:300, name:'2000以上'}]
			data:arr4("price_range")
		}]
	};
	myChart.setOption(option);
	window.addEventListener('resize',function(){
		myChart.resize();
	});
})();

// right_chart_3
(function(){
	let myChart=echarts.init(document.querySelector('.right_chart_3 .chart'));
	let option={
		legend:{
			fontSize:10,
			bottom:0,
			left:'center',
			itemWidth:10,
			itemHeight:10,
			textStyle:{
				color:'rgba(255,255,255,0.5)',
				fontSize:10,
			}
		},
		series:[{
			name:'面积模式',
			type:'pie',
			radius:['10%','70%'],
			center:['50%','45%'],
			roseType:'area',
			itemStyle:{
				borderRadius:5
			},
			label:{
				fontSize:10,
				color:'#FFFFFF'
			},
			// data:[{value:40, name:'熙悦雲上'},{value:38, name:'中绿东岳府'},{value:32, name:'霞公府'},{value:30, name:'贡院六号'},{value:28, name:'紫玉山庄'},{value:26, name:'东山墅'},{value:22, name:'融泽府'}]
			data:arr4("model_error")
		}]
	};
	myChart.setOption(option);
	window.addEventListener('resize',function(){
		myChart.resize();
	});
})();

// middle_chart
(function(){
	const myChart=echarts.init(document.querySelector(".map .chart"));
	const geoCoordMap={
		'上海':[121.4648,31.2891],
		'东莞':[113.8953,22.901],
		'东营':[118.7073,37.5513],
		'中山':[113.4229,22.478],
		'临汾':[111.4783,36.1615],
		'临沂':[118.3118,35.2936],
		'丹东':[124.541,40.4242],
		'丽水':[119.5642,28.1854],
		'乌鲁木齐':[87.9236,43.5883],
		'佛山':[112.8955,23.1097],
		'保定':[115.0488,39.0948],
		'兰州':[103.5901,36.3043],
		'包头':[110.3467,41.4899],
		'北京':[116.4551,40.2539],
		'北海':[109.314,21.6211],
		'南京':[118.8062,31.9208],
		'南宁':[108.479,23.1152],
		'南昌':[116.0046,28.6633],
		'南通':[121.1023,32.1625],
		'厦门':[118.1689,24.6478],
		'台州':[121.1353,28.6688],
		'合肥':[117.29,32.0581],
		'呼和浩特':[111.4124,40.4901],
		'咸阳':[108.4131,34.8706],
		'哈尔滨':[127.9688,45.368],
		'唐山':[118.4766,39.6826],
		'嘉兴':[120.9155,30.6354],
		'大同':[113.7854,39.8035],
		'大连':[122.2229,39.4409],
		'天津':[117.4219,39.4189],
		'太原':[112.3352,37.9413],
		'威海':[121.9482,37.1393],
		'宁波':[121.5967,29.6466],
		'宝鸡':[107.1826,34.3433],
		'宿迁':[118.5535,33.7775],
		'常州':[119.4543,31.5582],
		'广州':[113.5107,23.2196],
		'廊坊':[116.521,39.0509],
		'延安':[109.1052,36.4252],
		'张家口':[115.1477,40.8527],
		'徐州':[117.5208,34.3268],
		'德州':[116.6858,37.2107],
		'惠州':[114.6204,23.1647],
		'成都':[103.9526,30.7617],
		'扬州':[119.4653,32.8162],
		'承德':[117.5757,41.4075],
		'拉萨':[91.1865,30.1465],
		'无锡':[120.3442,31.5527],
		'日照':[119.2786,35.5023],
		'昆明':[102.9199,25.4663],
		'杭州':[119.5313,29.8773],
		'枣庄':[117.323,34.8926],
		'柳州':[109.3799,24.9774],
		'株洲':[113.5327,27.0319],
		'武汉':[114.3896,30.6628],
		'汕头':[117.1692,23.3405],
		'江门':[112.6318,22.1484],
		'沈阳':[123.1238,42.1216],
		'沧州':[116.8286,38.2104],
		'河源':[114.917,23.9722],
		'泉州':[118.3228,25.1147],
		'泰安':[117.0264,36.0516],
		'泰州':[120.0586,32.5525],
		'济南':[117.1582,36.8701],
		'济宁':[116.8286,35.3375],
		'海口':[110.3893,19.8516],
		'淄博':[118.0371,36.6064],
		'淮安':[118.927,33.4039],
		'深圳':[114.5435,22.5439],
		'清远':[112.9175,24.3292],
		'温州':[120.498,27.8119],
		'渭南':[109.7864,35.0299],
		'湖州':[119.8608,30.7782],
		'湘潭':[112.5439,27.7075],
		'滨州':[117.8174,37.4963],
		'潍坊':[119.0918,36.524],
		'烟台':[120.7397,37.5128],
		'玉溪':[101.9312,23.8898],
		'珠海':[113.7305,22.1155],
		'盐城':[120.2234,33.5577],
		'盘锦':[121.9482,41.0449],
		'石家庄':[114.4995,38.1006],
		'福州':[119.4543,25.9222],
		'秦皇岛':[119.2126,40.0232],
		'绍兴':[120.564,29.7565],
		'聊城':[115.9167,36.4032],
		'肇庆':[112.1265,23.5822],
		'舟山':[122.2559,30.2234],
		'苏州':[120.6519,31.3989],
		'莱芜':[117.6526,36.2714],
		'菏泽':[115.6201,35.2057],
		'营口':[122.4316,40.4297],
		'葫芦岛':[120.1575,40.578],
		'衡水':[115.8838,37.7161],
		'衢州':[118.6853,28.8666],
		'西宁':[101.4038,36.8207],
		'西安':[109.1162,34.2004],
		'贵阳':[106.6992,26.7682],
		'连云港':[119.1248,34.552],
		'邢台':[114.8071,37.2821],
		'邯郸':[114.4775,36.535],
		'郑州':[113.4668,34.6234],
		'鄂尔多斯':[108.9734,39.2487],
		'重庆':[107.7539,30.1904],
		'金华':[120.0037,29.1028],
		'铜川':[109.0393,35.1947],
		'银川':[106.3586,38.1775],
		'镇江':[119.4763,31.9702],
		'长春':[125.8154,44.2584],
		'长沙':[113.0823,28.2568],
		'长治':[112.8625,36.4746],
		'阳泉':[113.4778,38.0951],
		'青岛':[120.4651,36.3373],
		'韶关':[113.7964,24.7028]
	};
	const XAData=[[{
		name:'西安'
	},{
		name:'北京',
		value:100
	}],[{
		name:'西安'
	},{
		name:'上海',
		value:100
	}],[{
		name:'西安'
	},{
		name:'广州',
		value:100
	}],[{
		name:'西安'
	},{
		name:'葫芦岛',
		value:100
	}],[{
		name:'西安'
	},{
		name:'银川',
		value:100
	}]];

	const XNData=[[{
		name:'西宁'
	},{
		name:'北京',
		value:100
	}],[{
		name:'西宁'
	},{
		name:'上海',
		value:100
	}],[{
		name:'西宁'
	},{
		name:'广州',
		value:100
	}],[{
		name:'西宁'
	},{
		name:'西安',
		value:100
	}],[{
		name:'西宁'
	},{
		name:'武汉',
		value:100
	}],[{
		name:'武汉'
	},{
		name:'西宁',
		value:100
	}],[{
		name:'武汉'
	},{
		name:'哈尔滨',
		value:100
	}],[{
		name:'武汉'
	},{
		name:'乌鲁木齐',
		value:100
	}],[{
		name:'西宁'
	},{
		name:'银川',
		value:100
	}]];

	const YCData=[[{
		name:'银川'
	},{
		name:'北京',
		value:100
	}],[{
		name:'银川'
	},{
		name:'广州',
		value:100
	}],[{
		name:'银川'
	},{
		name:'上海',
		value:100
	}],[{
		name:'银川'
	},{
		name:'西安',
		value:100
	}],[{
		name:'银川'
	},{
		name:'西宁',
		value:100
	}],];

	const planePath='path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z';
	const convertData=function(data){
		const res=[];
		for(let i=0; i<data.length; i++){
			const dataItem=data[i];
			const fromCoord=geoCoordMap[dataItem[0].name];
			const toCoord=geoCoordMap[dataItem[1].name];
			if(fromCoord&&toCoord){
				res.push({
					fromName:dataItem[0].name,
					toName:dataItem[1].name,
					coords:[fromCoord,toCoord],
					value:dataItem[1].value
				});
			}
		}
		return res;

	};
	let color=['#A6C84C','#FFA022','#46BEE9'];
	const series=[];
	[['北京',XAData],['上海',XNData],['西安',YCData]].forEach(function(item,i){
		series.push({
			name:item[0]+' Top3',
			type:'lines',
			zlevel:1,
			effect:{
				show:true,
				period:6,
				trailLength:0.7,
				color:'red',
				symbolSize:3
			},
			lineStyle:{
				normal:{
					color:color[i],
					width:0,
					curveness:0.2
				}
			},
			data:convertData(item[1])
		},{
			name:item[0]+' Top3',
			type:'lines',
			zlevel:2,
			symbol:['none','arrow'],
			symbolSize:10,
			effect:{
				show:true,
				period:6,
				trailLength:0,
				symbol:planePath,
				symbolSize:15
			},
			lineStyle:{
				normal:{
					color:color[i],
					width:1,
					opacity:0.6,
					curveness:0.2
				}
			},
			data:convertData(item[1])
		},{
			name:item[0]+' Top3',
			type:'effectScatter',
			coordinateSystem:'geo',
			zlevel:2,
			rippleEffect:{
				brushType:'stroke'
			},
			label:{
				normal:{
					show:true,
					position:'right',
					formatter:'{b}'
				}
			},
			symbolSize:function(val){
				return val[2]/8;
			},
			itemStyle:{
				normal:{
					color:color[i],
				},
				emphasis:{
					areaColor:'#2B91B7'
				}
			},
			data:item[1].map(function(dataItem){
				return {
					name:dataItem[1].name,
					value:geoCoordMap[dataItem[1].name].concat([dataItem[1].value])
				};
			})
		});
	});
	let option={
		tooltip:{
			trigger:'item',
			formatter:function(params){
				if(params.seriesType==="effectScatter"){
					return "线路："+params.data.name+""+params.data.value[2];
				}else if(params.seriesType==="lines"){
					return params.data.fromName+">"+params.data.toName+"<br/>"+params.data.value;
				}else{
					return params.name;
				}
			}
		},
		legend:{
			bottom:'2%',
			data:['北京 Top3','上海 Top3','西安 Top3'],
			textStyle:{
				color:'#FFFFFF'
			},
			selectedMode:'multiple'
		},
		geo:{
			map:'china',
			zoom:1.2,
			label:{
				emphasis:{
					show:true,
					color:'rgba(255,255,255,1)',
				}
			},
			roam:false,
			itemStyle:{
				normal:{
					areaColor:'rgba(34, 70, 168, 0.7)',
					borderColor:'#0692A4'
				},
				emphasis:{
					areaColor:'rgba(119, 139, 224, 0.548)'
				}
			}
		},
		series:series
	};
	myChart.setOption(option);
	window.addEventListener('resize',function(){
		myChart.resize();
	});
})();